<template>
  <div class="child-menu hc">
    <!-- <div v-if="sideTheme=='sw-OA-index'" class="site-box-body">
      <div class="site-box">
        <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
      </div>
    </div> -->
    <el-scrollbar class="scorll-X" v-if="sidebarChildRouters.length > 0">
      <div style="text-align: center;margin-right: 17px;">
        <div style="display:inline-block">
          <el-menu ref="topNavMenu" :default-active="activeMenu" mode="horizontal">
            <sidebar-item class="hc-menu-item" :class="{'isactive':route.path==$route.path}" v-for="(route, index) in sidebarChildRouters" :key="route.path + index" :item="route" :base-path="route.path" />
          </el-menu>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import SidebarItem from "../../layout/components/Sidebar/SidebarItemtop.vue";
import Item from '../../layout/components/Sidebar/Item'
import AppLink from '../../layout/components/Sidebar/Link'
import { isExternal } from 'hc-core/utils/validate'
import path from 'path'
import Hamburger from '../../components/Hamburger'
import { mapGetters, mapState } from "vuex";
export default {
  components: { SidebarItem, Item, AppLink, Hamburger },
  computed: {
    ...mapState(["settings"]),
    ...mapGetters(["sidebarChildRouters", 'sidebar', 'topNavLeft']),
    sideTheme: (state) => state.settings.sideTheme,
    activeMenu()
    {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu)
      {
        return meta.activeMenu;
      }
      return path;
    },
    topNavLeft()
    {
      var div = document.getElementsByClassName('app-main')[0];
      if (!this.$store.state.settings.topNavLeft)
      {
        if (this.sideTheme != 'sw-OA-index')
        {
          div.style.paddingTop = '100px'
        } else
        {
          div.style.paddingTop = '0px'
        }
      } else
      {
        if (this.sideTheme != 'sw-OA-index')
        {
          div.style.paddingTop = '100px'
        } else
        {
          div.style.paddingTop = '0px'
        }
      }
      return this.$store.state.settings.topNavLeft
    }
  },
  data()
  {
    return {
      isArrayShow: false,
    };
  },
  methods: {
    toggleSideBar()
    {
      this.$store.dispatch('app/toggleSideBar')
    },
    resolvePath(routePath, routeQuery)
    {
      if (isExternal(routePath))
      {
        return routePath
      }
      if (isExternal(this.basePath))
      {
        return this.basePath
      }
      if (routeQuery)
      {
        let query = JSON.parse(routeQuery);
        return { path: path.resolve(this.basePath, routePath), query: query }
      }
      return path.resolve(this.basePath, routePath)
    },
  },
  mounted()
  {
    let div = document.getElementsByClassName('sidebar-logo-container')[0]
  }
}
</script>

<style lang="scss" scoped>
.child-menu {
  height: 32px;
  background-color: #fff;
  border-top: 1px #f0f0f0 solid;
  display: flex;
  align-items: center;
  .el-menu-item {
    height: 31px;
    line-height: 31px;
  }
  .is-active {
    height: 31px;
    line-height: 31px;
    border-bottom: 1px solid #0c64eb;
  }
  .scorll-X {
    width: 100%;
    ::v-deep .el-scrollbar__wrap {
      overflow-y: hidden;
    }
  }
  .el-scrollbar {
    height: auto;
  }
}
::v-deep.child-menu .el-menu-item span {
  font-size: 14px;
}
.isactive {
  border-bottom: 1px solid #0c64eb;
  height: 31px;
}
</style>
<style scoped>
.el-menu--horizontal {
  display: flex;
  align-items: center;
}

.hc-menu-item {
  /* display: inline-block; */
}

.child-menu >>> .el-submenu__title {
  height: 31px;
  line-height: 31px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.child-menu >>> .el-submenu__icon-arrow {
  position: static;
  margin: 0;
}
.child-menu >>> .el-menu-item {
  height: 31px;
  line-height: 31px;
  display: flex;
  align-items: center;
}
.child-menu .el-menu-item {
  border-bottom: 1px solid #0c64eb;
}
</style>
